<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>地址管理</title>

    <link th:href="@{/AmazeUI-2.4.2/assets/css/admin.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/AmazeUI-2.4.2/assets/css/amazeui.css}" rel="stylesheet" type="text/css">

    <link rel="stylesheet" type="text/css" th:href="@{/css/address.css}"/>

    <link th:href="@{/css/personal.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/addstyle.css}" rel="stylesheet" type="text/css">
    <script th:src="@{/AmazeUI-2.4.2/assets/js/jquery.min.js}" type="text/javascript"></script>
    <script th:src="@{/AmazeUI-2.4.2/assets/js/amazeui.js}"></script>
    <script type="text/javascript" th:src="@{/js/distpicker.js}"></script>
    <script type="text/javascript" th:src="@{/js/distpicker.data.js}"></script>
    <!--		<script type="text/javascript" th:src="@{/js/address.js"></script>-->
    <script type="text/javascript" th:src="@{/js/main.js}"></script>

</head>

<body>
<th:block th:include="common :: header2"></th:block>
<th:block th:include="common :: category"></th:block>

<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-address">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small>
                    </div>
                </div>
                <hr/>
                <ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails">
                    <li class="user-addresslist" th:each="address:${addressList}">
                        <span class="new-option-r"><i class="am-icon-check-circle"></i>设为默认</span>
                        <p class="new-tit new-p-re">
                            <span class="new-txt" th:text="${address.receiverName}"></span>
                            <span class="new-txt-rd2" th:text="${address.receiverMobile}"></span>
                        </p>
                        <div class="new-mu_l2a new-p-re">
                            <p class="new-mu_l2cw">
                                <span class="title">地址：</span>
                                <span class="province" th:text="${address.receiverProvince}"></span>
                                <span class="city" th:text="${address.receiverCity}"></span>
                                <span class="dist" th:text="${address.receiverDistrict}"></span>
                                <span class="street" th:text="${address.receiverAddress}"></span></p>
                        </div>
                        <ins class="deftip" th:if="${address.isDefault eq 0}">默认地址</ins>
                        <div class="new-addr-btn">
                            <a th:href="@{/user/edit(id=${address.id})}"><i class="am-icon-edit"></i>编辑</a>
                            <span class="new-addr-bar">|</span>
                            <a th:href="@{'/user/delete/'+${address.id}}"><i class="am-icon-trash"></i>删除</a>
                        </div>
                    </li>

                </ul>
                <div class="clear"></div>
                <a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
                <!--例子-->
                <div class="am-modal am-modal-no-btn" id="doc-modal-1">

                    <div class="add-dress">

                        <!--标题 -->
                        <div class="am-cf am-padding">
                            <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small>
                            </div>
                        </div>
                        <hr/>

                        <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
                            <form class="am-form am-form-horizontal" method="post" th:action="@{/user/address}">
                                <input type="hidden" name="userId" th:value="${session.User.id}">
                                <div class="am-form-group">
                                    <label for="user-name" class="am-form-label">收货人</label>
                                    <div class="am-form-content">
                                        <input type="text" name="receiverName" id="user-name" placeholder="收货人">
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="user-phone" class="am-form-label">手机号码</label>
                                    <div class="am-form-content">
                                        <input id="user-phone" name="receiverMobile" placeholder="手机号必填" type="tel">
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="user-address" class="am-form-label">所在地</label>
                                    <div class="am-form-content address">
                                        <div data-toggle="distpicker" id="target">
                                            <select name="receiverProvince" data-province="---- 选择省 ----"></select>
                                            <select name="receiverCity" data-city="---- 选择市 ----"></select>
                                            <select name="receiverDistrict" data-district="---- 选择区 ----"></select>
                                        </div>
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="user-intro" class="am-form-label">详细地址</label>
                                    <div class="am-form-content">
                                        <textarea class="" rows="3" id="user-intro" name="receiverAddress"
                                                  placeholder="输入详细地址" maxlength="100"></textarea>
                                        <small>100字以内写出你的详细地址...</small>
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <div class="am-u-sm-9 am-u-sm-push-3">
                                        <input type="submit" class="am-btn am-btn-danger" th:value="保存">
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>

                </div>

            </div>

            <script type="text/javascript">
                $(document).ready(function () {
                    $(".new-option-r").click(function () {
                        $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
                    });

                    var $ww = $(window).width();
                    if ($ww > 640) {
                        $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
                    }

                })
            </script>

            <div class="clear"></div>

        </div>
        <!--底部-->
        <th:block th:include="common :: footer"></th:block>
    </div>
    <th:block th:include="common :: menu"></th:block>

</div>
</body>
</html>